<template>
  <div class="banner b4">
    <div class="container-x-suit">
      <div class="container-y-suit center">
        <h2 v-text="title" class="title"></h2>
        <p v-html="ctnNormal" class="content-normal"></p>
        <div class="nav-flex-between">
          <div
              class="nav-flex-around"
              v-for="(cardList, index) in cardArray"
              :key="index">
            <div
                class="flex-item"
                v-for="card in cardList"
                :key="card.label">
              <circle-card
                :icon="card.icon"
                :label="card.label"
                @click.native="routerSkip(card.route)">
              </circle-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CircleCard from '@/base/circle-card/circle-card'
import Breviary from '@/base/breviary/breviary'
import outData from './zjhj'

export default {
  data() {
    return {
      cardArray: [
        [
          {icon: 'wendang', label: '公司简介', route: '/company/intro'},
          {icon: 'fq_zhibaoshu', label: '企业文化', route: '/company/cult'}
        ], [
          {icon: 'drxx106', label: '培训基地'},
          {icon: 'dashaxiaoqudizhi01', label: '办公一角'}
        ]
      ],
      title: outData.title,
      ctnSmall: outData.ctnSmall,
      ctnNormal: outData.ctnNormal
    }
  },
  methods: {
    routerSkip(route) {
      if (!route) {
        return
      }
      this.$router.push(route)
    }
  },
  components: {
    CircleCard,
    Breviary
  }
}
</script>

<style lang="stylus">
@import '~common/stylus/variable.styl'
@import '~common/stylus/mixin.styl'

.container-x-suit
  height: 100%
.container-y-suit
  .nav-flex-between
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    padding: 0 40px
  .nav-flex-around
    width: 50%
    display: flex
    flex-wrap: wrap
    justify-content: space-around
    .flex-item
      margin: 10px 0
      .circle
        cursor: pointer
  &.center
    width: 100%
    position: relative
    top: 50%
    transform: translateY(-50%)
    box-sizing: border-box

.banner
  &.b4
    position: relative
    background-image: requireImg('banner4.jpg')
    .title
      color: $color-theme
      text-align: center
      font-size: 32px
      font-weight: bold
    p
      font-size: $font-size-small
      padding: 40px 0
      &.content-normal
        font-size: 16px
        line-height: 25px
        text-align: center
    .container-b4
      height: 480px
      position: absolute
      top: 50%
      transform: translateY(-50%)

@media (max-width: $media-smail)
  .circle
    &.media
      width: 100px !important
      height: @width
      border-radius: @width
      i
        font-size: 25px !important
      h3
        font-size: 9px !important
  .container-y-suit
    .content-normal
      text-indent: 32px
      text-align: left !important
</style>
